<template>
  <el-container style="border: 1px solid #eee">
    <el-aside width="200px" style="background-color: transparent">
      <el-menu :default-openeds="['3', '4']">
        <el-submenu index="1">
          <template slot="title">按油品统计加油情况</template>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">按车辆统计加油情况</template>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">按单位统计加油情况</template>
          <el-menu-item-group>
            <el-menu-item index="2-1" >车辆加油详情</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">按IC卡统计加油情况</template>
          <el-menu-item-group>
            <el-menu-item index="2-1" >IC卡加油详情</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main>
        <el-table :data="tableData">
          <el-table-column prop="date" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>

</template>
<style lang="scss" scoped>
  $type1-width:350px;
  $type2-width:240px;
  .tabs-content-warp[data-v-66fc88b4]{
    border: 1px solid #6398a1;
  }
  .el-container{
    border: 0px solid !important;
  }
  .el-aside{
    padding: 0 0;
  }
  ::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
  .el-submenu__title i{
    color: transparent;
  }
  .el-message{
    padding-left: 0;
  }
  .el-menu{
    width: 180px;
    background-color: transparent !important;
    border-right: 0px solid;
    .el-menu-item{
      padding: 0 0;
  }
  }
  .el-header {
    padding: 0 0;
    background-color: transparent;
    color: #333;
    line-height: 50px;
    /*h2{*/
    /*  height: 40px;*/
    /*  margin: 0;*/
    /*  color: #ffffff;*/
    /*  text-align: center;*/

    /*}*/
  }
  .block{
    display: inline-block;
    float: left;
    .el-range-editor--medium.el-input__inner{
      width: $type1-width;
    }
    .el-range-editor--medium .el-range-input{
      background: transparent;
    }
    .demonstration{
      color: #ffffff;
      font-size: 14px;
    }
  }
  .el-button--medium{
    margin-left: 100px;
  }
  .class2-tit{
    text-align: center;
    h2{
      display: inline-block;
    }
  }
  .class2-choose{
    .block{
      width: 100%;
      display: block;
      text-align: left;
      .demonstration{
        font-size: 15px;
      }
      .el-input--medium{
        width: $type2-width;
      }
      .el-button--medium{
        position: relative;
        margin: 0;
        padding: 5px 10px;
        background-color: transparent;
        color: #F6F6F6;
        font-size: 1.5rem !important;
        border: none;
      }
      .rel-search{
        top: 4px;
        left: -50px;
      }
      .rel-download{
        top: 4px;
        left: -25px;
      }
      .el-input__inner{
        background-color: #3f5959;
        border: 1px solid #3eafb585;
      }
    }
  }
  .class3-choose{
    .el-range-editor--medium.el-input__inner{
      width: $type1-width - 20px ;
    }
  }
  .class4-choose{
    .el-range-editor--medium.el-input__inner{
      width: $type1-width - 20px ;
    }
  }
  .el-main{
    padding: 0;
  }
  .el-aside {
    background-color: transparent;
  }
</style>

<script>
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
    }
  };
</script>
